<template>
  <div class="article-list">

    <van-cell
      label="描述"
      labelClass="article-stats"
      class="article-default"
    >
      <template slot="title">
        <span class="article-list-title ellipsis-2">国家烟草专卖局党组成员、</span>
      </template>
      <div class="article-thumb">
        <img src="https://n.sinaimg.cn/blog/transform/175/w105h70/20190215/Ew5B-htacqwv3780452.jpg">
        <div class="babel-tips">3图</div>
      </div>
    </van-cell>

    <van-cell
      label="描述"
      labelClass="article-stats"
      class="article-default"
    >
      <template slot="title">
        <span class="article-list-title ellipsis-2">国家烟草专卖局党组成员、副局长赵洪顺接受中央纪委国家监委纪律审查和监察调查国家烟草专卖局党组成员、副局长赵洪顺接受中央纪委国家监委纪律审查和监察调查</span>
      </template>
    </van-cell>

    <van-cell
      label="描述"
      labelClass="article-stats"
      class="article-default"
    >
      <template slot="title">
        <span class="article-list-title ellipsis-2">国家烟草专卖局党组成员、副局长赵洪顺接受中央纪委国家监委纪律审查和监察调查</span>
      </template>
      <div class="article-thumb">
        <img src="https://n.sinaimg.cn/blog/transform/175/w105h70/20190215/Ew5B-htacqwv3780452.jpg">
      </div>
    </van-cell>

    <van-cell class="article-gralley">
      <template slot="title">
        <span class="article-list-title ellipsis-2">国家烟草专卖局党组成员、副局长赵洪顺接受中央纪委国家监委纪律审查和监察调查</span>
      </template>
      <div class="article-gralley-pics">
        <div><img src="https://n.sinaimg.cn/blog/transform/175/w105h70/20190215/Ew5B-htacqwv3780452.jpg"></div>
        <div><img src="https://n.sinaimg.cn/blog/transform/175/w105h70/20190215/Ew5B-htacqwv3780452.jpg"></div>
        <div><img src="https://n.sinaimg.cn/blog/transform/175/w105h70/20190215/Ew5B-htacqwv3780452.jpg"></div>
      </div>
      <div class="article-stats">描述|描述</div>
    </van-cell>

    <van-cell class="article-video">
      <template slot="title">
        <span class="article-list-title ellipsis-2">国家烟草专卖局党组成员、副局长赵洪顺接受中央纪委国家监委纪律审查和监察调查</span>
      </template>
      <div class="article-thumb">
        <img src="https://n.sinaimg.cn/blog/transform/175/w105h70/20190215/Ew5B-htacqwv3780452.jpg">
        <div class="article-thumb-icon"></div>
        <div class="babel-tips">00:12</div>
      </div>
      <div class="article-stats">描述|描述</div>
    </van-cell>
  </div>
</template>
<script>
import { Icon, Cell, Button } from 'vant'
import Child from './children'
export default {
  components: {
    Child,
    [Icon.name]: Icon,
    [Cell.name]: Cell,
    [Button.name]: Button
  },
  name: 'parent-list',
  data () {
    return {
      user: {
        data: ['1', '2', '3', '4', '5', '6']
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.article-list {
  &-title {
    line-height: 24px;
  }
  .article-stats {
    font-size: 10px;
    margin-top: 10px;
    line-height: initial;
    font-weight: 300;
  }
  .article-thumb {
    position: relative;
    width: 100%;
    &:before,
    &:after {
      display: table;
      content: "";
    }
    &:after {
      clear: both;
    }
    > img {
      float: right;
      width: 100%;
    }
    &-icon {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-image: url(../../assets/icons/play.png);
      background-size: 15%;
      background-color: rgba(0, 0, 0, 0.2);
      background-repeat: no-repeat;
      background-position: center center;
    }
    .babel-tips {
      position: absolute;
      right: 5%;
      bottom: 5%;
    }
  }
  .article-default {
    .van-cell__title /deep/ {
      flex: 2.5;
      position: relative;
      padding-bottom: 24px;
      .van-cell__label {
        position: absolute;
        left: 0;
        bottom: 0;
      }
    }
    .van-cell__value {
      align-self: center;
      padding-left: 10px;
      img {
        float: right;
        height: 100%;
      }
    }
  }
  .article-gralley,
  .article-video {
    flex-flow: row wrap;
    .van-cell__title /deep/ {
      padding-bottom: 10px;
    }
    .van-cell__value /deep/ {
      flex: none;
      width: 100%;
      text-align: left;
    }
  }
  .article-gralley {
    &-pics {
      width: 100%;
      display: flex;
      justify-content: space-between;
      > div {
        background: dodgerblue;
        flex-basis: 33%;
        > img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  &-body {
    width: 100%;
    padding-left: 40px;
    &__content {
      color: #333;
      padding-top: 5px;
    }
    &__extend {
      font-size: 10px;
      font-weight: 300;
      padding: 5px 0;
      span {
        display: inline-block;
        height: 100%;
      }
      .round {
        background-color: #f5f5f5;
        border-radius: 20px;
        padding: 0 6px;
      }
    }
    &__inners {
      background: #f2f6f9;
      padding: 10px;
      border-radius: 3px;
      li {
        font-size: 85%;
        span {
          color: #4b608f;
        }
      }
    }
  }
}
</style>
